<template>
  <a-card title="用户管理">
    <!-- 搜索框 -->
    <a-input-search
      v-model:value="searchKeyword"
      placeholder="输入姓名或邮箱搜索"
      @search="handleSearch"
      style="margin-bottom: 16px"
    >
      <template #suffix>
        <a-icon
          v-if="searchKeyword"
          type="close-circle"
          @click="clearSearch"
          style="cursor: pointer"
        />
      </template>
    </a-input-search>
    <!-- 刷新按钮 -->
    <a-button @click="handleRefresh" style="margin-bottom: 16px"
      >刷新数据</a-button
    >
    <!-- 正常显示表格 -->
    <a-table
      :columns="columns"
      :data-source="filteredData"
      :pagination="pagination"
      @change="handleTableChange"
      :row-key="(record) => record.id"
    >
      <template #action="{ record }">
        <a-button type="link" @click="handleEdit(record)">编辑</a-button>
        <a-button type="link" danger @click="confirmDelete(record.id)">
          删除
        </a-button>
      </template>
    </a-table>
    <!-- 添加用户模态框 -->
    <a-modal
      :visible="addModalVisible"
      title="添加用户"
      @ok="handleAddUserOk"
      @cancel="handleAddUserCancel"
    >
      <a-form :form="addUserForm" layout="vertical">
        <a-form-item
          label="姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        >
          <a-input v-model:value="addUserFormState.name" />
        </a-form-item>
        <a-form-item
          label="邮箱"
          :rules="[{ required: true, message: '请输入邮箱' }]"
        >
          <a-input v-model:value="addUserFormState.email" />
        </a-form-item>
        <a-form-item
          label="角色"
          :rules="[{ required: true, message: '请选择角色' }]"
        >
          <a-select v-model:value="addUserFormState.role">
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="user">普通用户</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 编辑用户模态框 -->
    <a-modal
      :visible="editModalVisible"
      title="编辑用户"
      @ok="handleEditUserOk"
      @cancel="handleEditUserCancel"
    >
      <a-form :form="editUserForm" layout="vertical">
        <a-form-item
          label="姓名"
          :rules="[{ required: true, message: '请输入姓名' }]"
        >
          <a-input v-model:value="editUserFormState.name" />
        </a-form-item>
        <a-form-item
          label="邮箱"
          :rules="[{ required: true, message: '请输入邮箱' }]"
        >
          <a-input v-model:value="editUserFormState.email" />
        </a-form-item>
        <a-form-item
          label="角色"
          :rules="[{ required: true, message: '请选择角色' }]"
        >
          <a-select v-model:value="editUserFormState.role">
            <a-select-option value="admin">管理员</a-select-option>
            <a-select-option value="user">普通用户</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-modal>
    <!-- 添加用户按钮 -->
    <a-button type="primary" @click="showAddUserModal" style="margin-top: 16px">
      添加用户
    </a-button>
  </a-card>
</template>

<script>
import { ref, reactive, computed } from "vue";
import { FormInstance, Modal } from "ant-design-vue";
import { message, confirm } from "ant-design-vue";
import { handlerDel } from "@/components/hanlderDel/handler-del.js";

export default {
  setup() {
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
        sorter: (a, b) => a.id - b.id,
      },
      {
        title: "姓名",
        dataIndex: "name",
        sorter: (a, b) => a.name.localeCompare(b.name),
      },
      {
        title: "邮箱",
        dataIndex: "email",
        sorter: (a, b) => a.email.localeCompare(b.email),
      },
      {
        title: "角色",
        dataIndex: "role",
        sorter: (a, b) => a.role.localeCompare(b.role),
      },
      { title: "操作", slots: { customRender: "action" } },
    ];

    // 静态用户数据
    const data = ref([
      { id: 1, name: "用户1", email: "user1@example.com", role: "admin" },
      { id: 2, name: "用户2", email: "user2@example.com", role: "user" },
      { id: 3, name: "用户3", email: "user3@example.com", role: "admin" },
      { id: 4, name: "用户4", email: "user4@example.com", role: "user" },
      { id: 5, name: "用户5", email: "user5@example.com", role: "admin" },
    ]);

    const pagination = ref({ pageSize: 10, current: 1 });
    const searchKeyword = ref("");
    const addModalVisible = ref(false);
    const addUserForm = ref();
    const addUserFormState = reactive({
      name: "",
      email: "",
      role: "",
    });
    const editModalVisible = ref(false);
    const editUserForm = ref();
    const editUserFormState = reactive({
      id: null,
      name: "",
      email: "",
      role: "",
    });

    // 处理刷新
    const handleRefresh = () => {
      // 可以在这里添加刷新逻辑，比如重置搜索关键字
      searchKeyword.value = "";
    };

    // 编辑用户信息
    const handleEdit = (record) => {
      editUserFormState.id = record.id;
      editUserFormState.name = record.name;
      editUserFormState.email = record.email;
      editUserFormState.role = record.role;
      editModalVisible.value = true;
    };

    // 删除用户信息
    const confirmDelete = (id) => {
      handlerDel(id, "用户");
      data.value = data.value.filter((item) => item.id !== id);
    };

    const handleDelete = (id) => {};

    // 处理表格分页、排序、筛选变化
    const handleTableChange = (paginationInfo, filters, sorter) => {
      pagination.value = paginationInfo;
      if (sorter.field) {
        // 处理排序
        const { field, order } = sorter;
        const sortFunc = columns.find((col) => col.dataIndex === field).sorter;
        data.value.sort((a, b) => {
          const result = sortFunc(a, b);
          return order === "ascend" ? result : -result;
        });
      }
    };

    // 处理搜索
    const handleSearch = () => {
      // 无需请求 API，直接过滤数据
    };

    // 清除搜索内容
    const clearSearch = () => {
      searchKeyword.value = "";
    };

    // 显示添加用户模态框
    const showAddUserModal = () => {
      addModalVisible.value = true;
    };

    // 处理添加用户确认
    const handleAddUserOk = () => {
      const newUser = {
        id: data.value.length + 1,
        ...addUserFormState,
      };
      data.value.push(newUser);
      addModalVisible.value = false;
      addUserForm.value?.resetFields();
      message.success("用户添加成功");
    };

    // 处理添加用户取消
    const handleAddUserCancel = () => {
      addModalVisible.value = false;
      addUserForm.value?.resetFields();
    };

    // 处理编辑用户确认
    const handleEditUserOk = () => {
      const index = data.value.findIndex(
        (item) => item.id === editUserFormState.id
      );
      if (index !== -1) {
        data.value[index] = {
          ...data.value[index],
          ...editUserFormState,
        };
      }
      editModalVisible.value = false;
      editUserForm.value?.resetFields();
      message.success("用户编辑成功");
    };

    // 处理编辑用户取消
    const handleEditUserCancel = () => {
      editModalVisible.value = false;
      editUserForm.value?.resetFields();
    };

    // 过滤数据
    const filteredData = computed(() => {
      if (!searchKeyword.value) {
        return data.value;
      }
      return data.value.filter((item) => {
        return (
          item.name.includes(searchKeyword.value) ||
          item.email.includes(searchKeyword.value)
        );
      });
    });

    return {
      columns,
      data,
      pagination,
      searchKeyword,
      addModalVisible,
      addUserForm,
      addUserFormState,
      editModalVisible,
      editUserForm,
      editUserFormState,
      handleEdit,
      confirmDelete,
      handleTableChange,
      handleSearch,
      clearSearch,
      showAddUserModal,
      handleAddUserOk,
      handleAddUserCancel,
      handleEditUserOk,
      handleEditUserCancel,
      filteredData,
      handleRefresh,
    };
  },
};
</script>
